<style>
	.content {
		border: 1px solid#999;
		border-radius: 16px;
		margin-bottom: 20px;
		padding: 10px;
	}

	.listItem1 {
		flex: 1;
		margin: 10px;
		background: #fff;
		padding: 10px;
		border-radius: 16px;
		text-align: center;
	}

	.listItem1 div {
		text-align: center;
	}

	.listTitle {
		background-image: linear-gradient(to right, #3a3ef4, #3a3ef4);
		color: #fff;
		border-radius: 40px;
		padding: 6px 10px;
		margin: 10px 0;
	}
</style>
<template>
	<div>
		<div class="displayFlexBet bgfff pad10" style="margin-bottom: 10px;border-radius:8px">

			<el-button @click="visible1 = true,form=$options.data().form" icon="el-icon-plus" type="primary"
				size="mini">新增视频监控</el-button>
		</div>

		<div class="displayFlexBet pad10 bgfff color555" style="border-radius:8px">
			<div style="flex:1">设备编号</div>
			<div style="flex:1" class="">监测位置</div>
			<div style="flex:1" class="">经度</div>
			<div style="flex:1" class="">纬度</div>
			<div style="flex:1" class="">监控对象</div>
			<div style="flex:1" class="">是否已连接视频源</div>
			<div style="flex:1" class="">状态</div>
			<div style="flex:1" class="">操作</div>
		</div>

		<div class="bgfff mt10" style="border-radius:8px">
			<el-empty v-if="dataList.length == 0" />
			<div class="displayFlexBet pad10 color555 point" v-for="(item,index) in dataList" :key="index"
				style="border-bottom:1px solid#F8F7F9" @click="gotoDetail(item)">
				<div style="flex:1">{{item.equipmentNo }}</div>
				<div style="flex:1" class="">{{item.equipmentPosition}}</div>
				<div style="flex:1" class="">{{item.lat}}</div>
				<div style="flex:1" class="">{{item.lng}}</div>
				<div style="flex:1" class="">{{item.description}}</div>
				<div style="flex:1" class="">
					<div v-if="item.onlineFlag" class="displayFlexBet pad10"
						style="width: 80px;height: 28px;background: #E6F7E9;border-radius: 14px">
						<div style="width: 13px;height: 13px;background: #4CD964;border-radius: 50%;"></div>
						<div class="color000" style="font-weight:500">是</div>
					</div>
					<div v-else class="displayFlexBet pad10"
						style="width: 80px;height: 28px;background: #FAE6E6;border-radius: 14px">
						<div style="width: 13px;height: 13px;background: #EF5350;border-radius: 50%;"></div>
						<div class="color000" style="font-weight:500">否</div>
					</div>
				</div>
				<div style="flex:1" class="">
					<div v-if="item.busiStatus == 'IN_USE'" class="displayFlexBet pad10"
						style="width: 80px;height: 28px;background: #E6F7E9;border-radius: 14px">
						<div style="width: 13px;height: 13px;background: #4CD964;border-radius: 50%;"></div>
						<div class="color000" style="font-weight:500">使用中</div>
					</div>
					<div v-else class="displayFlexBet pad10"
						style="width: 80px;height: 28px;background: #FAE6E6;border-radius: 14px">
						<div style="width: 13px;height: 13px;background: #EF5350;border-radius: 50%;"></div>
						<div class="color000" style="font-weight:500">停用</div>
					</div>
				</div>
				<div style="flex: 1;display: flex;align-items: center;">

					<!-- <img src="@/assets/sIcon68.png" style="cursor: pointer;width: 15px;height: 18px;"
						@click.stop="getVideo(item)" />

					<img src="@/assets/sIcon68.png" style="cursor: pointer;width: 15px;height: 18px;"
						@click.stop="getVideo2(item)" class="ml15" /> -->

					<img src="@/assets/sIcon68.png" style="cursor: pointer;width: 15px;height: 18px;"
						@click.stop="edit(item)" class="" />

					<img v-if="item.busiStatus !='NOT_USE'" src="@/assets/sIcon82.png"
						style="cursor: pointer;width: 18px;height: 18px;" class="ml15"
						@click.stop="updateBusiStatus(item)">
					</img>
					<div v-else
						style="background: #FAE6E6;padding: 4px 10px;color:#EF5350;margin-left: 15px;border-radius: 20px;"
						class="font12 point" @click.stop="updateBusiStatus(item)">重启</div>

				</div>

			</div>
		</div>

		<!--新增基础信息-->
		<el-dialog title="视频监测点" :visible.sync="visible1" width="40%" top="2%">
			<el-form ref="form" :model="form" label-width="120px" :rules="formRules">
				<el-form-item label="设备编号" prop="equipmentNo">
					<el-input v-model="form.equipmentNo" placeholder="设备编号" style="width: 100%;"></el-input>
				</el-form-item>

				<el-form-item label="监测位置" prop="equipmentPosition">
					<div class="displayFlexBet">
						<el-input v-model="form.equipmentPosition" placeholder="监测位置"
							style="width: calc(100% - 0px);"></el-input>
					</div>
				</el-form-item>

				<el-form-item label="经度" prop="lng">
					<div class="displayFlexBet">
						<el-input v-model="form.lng" placeholder="经度" style="width: calc(100% - 0px);"></el-input>
					</div>
				</el-form-item>

				<el-form-item label="纬度" prop="lat">
					<div class="displayFlexBet">
						<el-input v-model="form.lat" placeholder="纬度" style="width: calc(100% - 0px);"></el-input>
					</div>
				</el-form-item>

				<!-- <el-form-item label="监控区域" prop="areaId">
					<div class="displayFlexBet">
						<el-select v-model="form.areaId" collapse-tags style="width: 100%;" placeholder="监控区域"
							filterable @change="changeArea">
							<el-option v-for="item2 in areaList" :key="item2.id" :label="item2.areaName"
								:value="item2.id">
							</el-option>
						</el-select>
					</div>
				</el-form-item> -->

				<el-form-item label="监控对象" prop="targetId">
					<div class="displayFlexBet">
						<el-select v-model="form.targetId" collapse-tags style="width: 100%;" placeholder="监控对象"
							filterable>
							<el-option v-for="item2 in areaTargetList" :key="item2.id" :label="item2.targetName"
								:value="item2.id">
							</el-option>
						</el-select>
					</div>
				</el-form-item>

				<el-form-item label="设备码" prop="deviceSerial">
					<div class="displayFlexBet">
						<el-input v-model="form.deviceSerial" placeholder="设备码"
							style="width: calc(100% - 0px);"></el-input>
					</div>
				</el-form-item>

				<el-form-item label="通道编码" prop="gbChannel">
					<div class="displayFlexBet">
						<el-input v-model="form.gbChannel" placeholder="通道编码"
							style="width: calc(100% - 0px);"></el-input>
					</div>
				</el-form-item>
				
				<el-form-item label="x轴" prop="xCoords">
					<el-input placeholder="x轴" v-model="form.xCoords"></el-input>
				</el-form-item>
				<el-form-item label="y轴" prop="yCoords">
					<el-input placeholder="y轴" v-model="form.yCoords"></el-input>
				</el-form-item>
				<el-form-item label="z轴" prop="zCoords">
					<el-input placeholder="z轴" v-model="form.zCoords"></el-input>
				</el-form-item>
			</el-form>

			<div style="text-align: center;margin-top: 30px;" slot="footer">
				<el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
				<el-button @click="visible1 = false">取消</el-button>
			</div>
		</el-dialog>


		<el-dialog title="视频" :visible.sync="dialogVisible" width="50%">
			<!-- <iframe :src="videoUrl" style="width: 100%;height: 300px;"></iframe> -->
			<video ref="videoElement" controls></video>
		</el-dialog>

		<el-dialog title="视频" :visible.sync="dialogVisible2" width="50%">
			<iframe :src="videoUrl" style="width: 100%;height: 900px;"></iframe>
		</el-dialog>


	</div>
</template>

<script>
	import flvjs from 'flv.js';
	let that
	export default {
		components: {

		},
		data() {
			return {
				params: {},
				form: {},
				formRules: {
					equipmentNo: [{
						required: true,
						message: '请输入设备编号',
						trigger: 'blur',
					}],
					equipmentPosition: [{
						required: true,
						message: '请输入监测位置',
						trigger: 'blur',
					}],
					lng: [{
						required: true,
						message: '请输入经度',
						trigger: 'blur',
					}],
					lat: [{
						required: true,
						message: '请输入纬度',
						trigger: 'blur',
					}],
					targetId: [{
						required: true,
						message: '请选择监控对象',
						trigger: 'change',
					}]
				},
				visible1: false,
				dialogVisible: false,
				dialogVisible2: false,
				dataList: [],
				outletList: [],
				videoUrl: '',
				flvPlayer: null,
				areaList: [],
				areaTargetList: [],
				loading: false,
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.ajax({
				url: '/video/monitor/equipment/getOutletList',
				data: JSON.stringify({}),
				contentType: 'application/json',
				success: function(result) {
					that.outletList = result.data
				},
			})

			that.getDataList()
			that.getGoingTargetList()
		},

		beforeDestroy() {
			if (this.flvPlayer) {
				this.flvPlayer.destroy();
			}
		},

		methods: {

			changeArea() {
				that.form.targetId = ''
				that.getGoingTargetList()
			},

			getGoingTargetList() {
				that.ajax({
					url: '/video/monitor/target/getGoingTargetList?ticketId=' + that.params.ticketId,
					data: {
						areaId: that.form.areaId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.areaTargetList = result.data
						}
					},
				})
			},
			getGoingAreaList() {
				that.ajax({
					url: '/areaBaseMng/getGoingAreaList?ticketId=' + that.params.ticketId,
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.areaList = result.data
						}
					},
				})
			},

			getVideo(item) {


				that.ajax({
					url: '/video/monitor/equipment/getVideoLiveUrl?ticketId=' + that
						.params.ticketId,
					data: {
						id: item.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dialogVisible = true
							//that.videoUrl = result.data

							setTimeout(function() {
								if (flvjs.isSupported()) {
									that.flvPlayer = flvjs.createPlayer({
										type: 'flv',
										url: result.data
									});

									that.flvPlayer.attachMediaElement(that.$refs.videoElement);

									that.flvPlayer.load();
									that.flvPlayer.play();
								} else {
									console.error('FLV.js is not supported in this browser.');
								}
							}, 1000)

						}
					},
				})
			},

			getVideo2(item) {
				that.ajax({
					url: '/video/getToken?ticketId=' + that
						.params.ticketId,
					data: {
						id: item.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dialogVisible2 = true
							that.videoUrl = "https://open.ys7.com/ezopen/h5/live?accessToken=" + result.data +
								"&deviceSerial=" + item.deviceSerial + "&channelNo=1"
						}
					},
				})
			},

			changeOutlet() {
				let thisIndex = that.outletList.findIndex(item => item.outletId == that.form.outletId)
				if (thsiIndex != -1) that.form.outletType = that.outletId[thsiIndex].outletType
			},

			edit(item) {
				that.form = JSON.parse(JSON.stringify(item))
				that.visible1 = true
			},

			updateBusiStatus(item) {
				let noticeText = "是否停用此视频监控"
				if (item.busiStatus == 'NOT_USE') noticeText = "是否启用此视频监控"
				this.$alert(noticeText, '', {
					confirmButtonText: '确定',
					callback: action => {
						if (action == "confirm") {
							that.ajax({
								url: '/video/monitor/equipment/updateBusiStatus?ticketId=' + that
									.params.ticketId,
								data: {
									ticketId: that.params.ticketId,
									monitorId: item.id
								},
								contentType: 'application/x-www-form-urlencoded',
								success: function(result) {
									if (result.data) {
										if (item.busiStatus == 'NOT_USE') item.busiStatus =
											"IN_USE"
										else item.busiStatus = "NOT_USE"
									}
								},
							})
						}
					}
				});
			},

			onSubmit() {
				that.$refs.form.validate((valid) => {
					if (valid) {
						that.loading = true
						that.ajax({
							url: '/video/monitor/equipment/saveOrUpdate?ticketId=' + that.params.ticketId,
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.$message.success("保存成功！")
									that.form = {}
									that.visible1 = false
									that.loading = false
									that.getDataList()
								}
							},
						})
					}
				})
			},

			getDataList() {
				that.ajax({
					url: '/video/monitor/equipment/pageVideoMonitor?ticketId=' + that.params.ticketId +
						"&pageNum=1&pageSize=99999",
					data: JSON.stringify({
						ticketId: that.params.ticketId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data.records
						}
					},
				})
			},


		}
	}
</script>


<style scoped>
	.display_Flex_Bet {
		display: flex;
		justify-content: space-between;
	}
</style>